---
type: tutorial
title: Write your first line of Astro
description: |-
  Tutorial: Build your first Astro blog —
  Make your first edits to your tutorial project's home page
i18nReady: true
---
import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import InstallGuideTabGroup from '~/components/TabGroup/InstallGuideTabGroup.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

<PreCheck>
  - Make your first edit to your new website
</PreCheck>

## Edit your home page

<Steps>
1. In your code editor, navigate in the Explorer file pane to `src/pages/index.astro` and click on it to open the file's contents in an editable tab.

    The contents of your `index.astro` file should look like this:

    ```astro title="src/pages/index.astro"
    ---
    ---

    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} >
        <title>Astro</title>
      </head>
      <body>
        <h1>Astro</h1>
      </body>
    </html>
    ```

2. Edit the content of your page `<body>`.

    Type in the editor to change the heading text on your page and save the change.

    ```astro title="src/pages/index.astro" del={2} ins={3}
    <body>
      <h1>Astro</h1>
      <h1>My Astro Site</h1>
    </body>
    ```

3. Check the browser preview and you should see your page content updated to the new text.
</Steps>

Congratulations! You are now an Astro developer!

The rest of this unit will set you up for success with version control and a published website you can show off.



<Box icon="check-list">
## Checklist

<Checklist>
- [ ] I can make changes and see them in the browser.
- [ ] I am an Astro developer!
</Checklist>
</Box>
